import React,{Component} from  'react'
import {Row,Col,Table} from 'antd'
import  './detail.less'
import {orderDetail} from "../../../redux/order.redux";
import {connect} from 'react-redux'


const columns = [{
    title: '商品图片',
    dataIndex: 'productImage',
    render: productImage =>  <div><img className='p-img' src={'http://img.happymmall.com/'+ productImage}/></div>,
}, {
    title: '商品信息',
    dataIndex: 'productName',
}, {
    title: '单价',
    dataIndex: 'currentUnitPrice',
},
    {
        title: '数量',
        dataIndex: 'quantity',
    },
    {
        title: '合计',
        dataIndex: 'totalPrice',
    },
];



class Detail extends Component{
    constructor(props){
        super(props);
    }
    componentDidMount() {
        this.props.orderDetail(this.props.match.params.orderId);
    }
    render(){
        return (
            <div className='order-detail'>
                <h1 className='page-header'>订单详情</h1>
                <div>
                    <Row >
                        <Col offset={4} span={20} style={{marginBottom:'15px'}}>
                            <span className="spanHeight" style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>订单号：</span>
                             <p className='form-control-static' style={{float:'left'}}>{this.props.data.orderNo}</p>
                             <div style={{clear:'both'}}></div>
                        </Col>
                        <Col offset={4} span={20}  style={{marginBottom:'15px'}}>
                            <span className="spanHeight" style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>创建时间：</span>
                            <p className='form-control-static' style={{float:'left'}}>{this.props.data.createTime}</p>
                            <div style={{clear:'both'}}></div>
                        </Col>
                        <Col offset={4} span={20}  style={{marginBottom:'15px'}}>
                            <span className="spanHeight"  style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>收件人：</span>
                            <p className='form-control-static' style={{float:'left'}}>{this.props.data.receiverName}</p>
                            <div style={{clear:'both'}}></div>
                        </Col>
                        <Col offset={4} span={20}  style={{marginBottom:'15px'}}>
                            <span className="spanHeight" style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>订单状态：</span>
                            <p className='form-control-static' style={{float:'left'}}>{this.props.data.statusDesc}</p>
                            <div style={{clear:'both'}}></div>
                        </Col>
                        <Col offset={4} span={20}  style={{marginBottom:'15px'}}>
                            <span className="spanHeight"  style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>支付方式：</span>
                            <p className='form-control-static' style={{float:'left'}}>{this.props.data.paymentTypeDesc}</p>
                            <div style={{clear:'both'}}></div>
                        </Col>
                        <Col offset={4} span={20}  style={{marginBottom:'15px'}}>
                            <span className="spanHeight"  style={{float:'left',width:'150px',textAlign:'right',marginRight:'10px'}}>订单金额：</span>
                            <p className='form-control-static' style={{float:'left'}}>￥{this.props.data.payment}</p>
                            <div style={{clear:'both'}}></div>
                        </Col>
                    </Row>
                </div>

                <Table size='small'
                       pagination={false}
                       columns={columns}
                       dataSource={this.props.data.orderItemVoList}
                       bordered
                />
            </div>
        )
    }
}



function mapStateToProps(state){
    console.log(state.order)
    return state.order;
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    orderDetail: (pageNum) => {
        dispatch(orderDetail(pageNum))
    }
} )
export default connect(mapStateToProps, mapDispatchToProps)(Detail);
